<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏元素</button>
    <transition name="yang">
    <div class="box" v-show="isShow"></div>
    </transition>
    <hr>
    <transition>
    <div class="box" v-show="isShow"></div>
    </transition>
  </div>
  
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isShow:true,
    }
  },
  }
  
</script>

<style scoped>
.box{
  width: 100px;
  height: 100px;
  background: red;
}
.v-enter,
.v-leave-to{
  opacity:0
}

.v-leave,
.v-enter-to{
  opacity: 1;
}

/* 定义进入过渡生效时的状态 出现*/
.v-enter-active{
  transition:all 10s linear;
}

/* 定义离开过渡生效时的状态   消失*/
.v-leave-active{
  transition:all 1s linear
}





/* 控制动画的元素在进入时,和离开之后的样式 */
.yang-enter,
.yang-leave-to{
  opacity: 0;
  transform: translateX(100px);
}

.yang-enter-active,
.yang-leave-active{
  transition:all 5s linear
}


</style>
